/**
 * Created by arnold.zhu on 6/29/2017.
 */
import React from 'react';
import {Link} from 'react-router';
import {Table} from 'antd';

import RoleEditComponent from './role-edit.js';
import RoleService from '../../../service/role/roleService';

const RoleComponent = React.createClass({
  getInitialState: function () {
    return {
      // 排序过滤
      filteredInfo: null,
      sortedInfo: null,
      data: [],
      pagination: {
        showSizeChanger: true
      },
      loading: false
    };
  },
  componentDidMount: function () {
    this.loadData();
  },
  loadData: function () {
    this.setState({loading: true});
    RoleService.getRoleList({}).then(result => {
      const pagination = this.state.pagination;
      pagination.total = result.length;
      this.setState({
        loading: false,
        data: result,
        pagination,
      });
    }).catch(err => {
      console.info(err);
    });
  },
  getColumns: function (sortedInfo, filteredInfo) {
    const columns = [{
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (text, record) => (
        <Buttons text={text} record={record} reloadData={this.loadData}/>
      )
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      filters: [
        {text: '姓李的', value: '李'},
        {text: '姓胡的', value: '胡'},
      ],
      filteredValue: filteredInfo.name,
      onFilter: (value, record) => record.name.includes(value),
      sorter: (a, b) => a.name.length - b.name.length,
      sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      filters: [
        {text: '南湖', value: '南湖'},
        {text: '西湖', value: '西湖'},
      ],
      filteredValue: filteredInfo.address,
      onFilter: (value, record) => record.address.includes(value),
      sorter: (a, b) => a.address.length - b.address.length,
      sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
    }];
    return columns;
  },
  handleTableChange: function (pagination, filters, sorter) {
    console.log('各类参数是', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
    this.loadData();
  },
  clearFilters: function (e) {
    e.preventDefault();
    this.setState({filteredInfo: null});
  },
  clearAll: function (e) {
    e.preventDefault();
    this.setState({
      filteredInfo: null,
      sortedInfo: null,
    });
  },
  setAgeSort: function (e) {
    e.preventDefault();
    this.setState({
      sortedInfo: {
        order: 'descend',
        columnKey: 'age',
      },
    });
  },
  render: function () {
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = this.getColumns(sortedInfo, filteredInfo);
    return (
      <div>
        <Table columns={columns} dataSource={this.state.data}
               pagination={this.state.pagination}
               loading={this.state.loading} onChange={this.handleTableChange}/>
      </div>
    );
  }
});

const Buttons = React.createClass({
  getInitialState: function () {
    return {
      clicked: false
    }
  },
  handleSync: function () {
    this.setState({
      clicked: !this.state.clicked
    });
  },
  handleRemove: function () {
    var id = this.props.text;
    if (window.confirm('即将删除ID:' + id + '的记录，删除后刷新表格!')) {
      this.props.reloadData();
    }
  },
  render: function () {
    var customeStyle = this.state.clicked ? {cursor: 'not-allowed'} : {cursor: 'pointer'};
    var editUrl = "/main/role/edit/" + this.props.text;
    return (
      <span>
        <Link to={editUrl}>Edit</Link>
        <span className="ant-divider"/>
        <a href="javascript:void(0);" onClick={this.handleRemove}>Remove</a>
        <span className="ant-divider"/>
        <a href="javascript:void(0);" onClick={this.handleSync} style={customeStyle}>Sync</a>
      </span>
    )
  }
});

export default RoleComponent;